<!--
 * @Description: 
 * @Autor: Zhongyu
 * @Date: 2021-03-12 10:10:42
 * @LastEditors: Zhongyu
 * @LastEditTime: 2021-03-19 16:26:07
-->
<template>
	<div id="app" class="app">
		<el-container class="container-whole">
			<el-aside class="aside-menu">
				<div class="logo">ZY-WEBSITE</div>
				<z-menu
					:datas="menus"
					:defaultActive="selectMenuKey"
					@select="handleSelect"
				></z-menu>
			</el-aside>

			<el-container class="container-not-menu">
				<el-header style="text-align: right; font-size: 12px">
					<z-header></z-header>
				</el-header>

				<el-main>
					<z-breadcrumb :datas="breadcrumbDatas"></z-breadcrumb>
					<div class="main-conetnt">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import { menus } from './configs/config';
import ZMenu from './components/ZMenu';
import ZHeader from './components/ZHeader';
import ZBreadcrumb from './components/ZBreadcrumb';
export default {
	components: {
		ZMenu,
		ZHeader,
		ZBreadcrumb,
	},
	data() {
		const item = {
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1518 弄',
		};
		return {
			menus: menus,
			selectMenuKey: '1',
			tableData: Array(20).fill(item),
			breadcrumbDatas: [],
		};
	},
	created() {
		let path = this.$route.path;
		let menu = menus.find(params => {
			return params.url == path;
		});
		if (menu) {
			this.selectMenuKey = menu.key;
		}
	},
	mounted() {},
	watch: {
		'$store.state.breadcrumbDatas': function() {
			//监听vuex中breadcrumbDatas变化
			this.breadcrumbDatas = this.$store.state.breadcrumbDatas;
		},
	},
	methods: {
		handleSelect(key) {
			let menuArr = [...menus];
			menus.forEach(item => {
				menuArr = menuArr.concat(item.children);
				console.log('item', item.children);
			});
			let menu = menuArr.find(params => {
				return params.key == key;
			});
			if (menu && this.$route.path != menu.url) {
				this.$router.push(menu.url);
			}
		},
	},
};
</script>

<style lang="less" src="./app.less"></style>
